<!--
 * @description  :移送外单位案件代管入库
 * @descriptionDetail:移送外单位案件代管入库
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-26 16:54:03
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">案件信息</view>
        </view>
        <u-form :model="baseInfo" ref="uForm" :error-type="['border-bottom', 'message',]" label-width="140" label-position="top" :border-bottom="false" :label-style="labelStyle">
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="移送函编码" prop="docNo" :required="true">
                <u-input
                  placeholder="请输入"
                  v-model="baseInfo.docNo"
                >
                </u-input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="案件编号" prop="caseCode" :required="true">
                <u-input
                  placeholder="请输入"
                  v-model="baseInfo.caseCode"
                >
                </u-input>
                <u-icon name="search" :color="$theme.u_type_primary" size="44" @click="searchGoods"></u-icon>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="仓库名称" :required="true" prop="storeName">
                <u-input
                  :disabled="true"
                  :needValid="true"
                  placeholder="请选择"
                  v-model="baseInfo.storeName"
									:custom-style="pointerStyle"
                  @click="handlerSelect"
                >
                </u-input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="代管编号">
                <u-input
                  :disabled="true"
                  placeholder="自动生成，代管编号需要唯一"
                  v-model="baseInfo.custodyNo"
                >
                </u-input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="备注" :required="true" prop="remake">
                <u-input type="textarea" :border="false" placeholder="请填写备注" height="66" v-model="baseInfo.remake" />
              </u-form-item>
            </u-col>
          </u-row>
        </u-form>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style" style="line-height: 62rpx;">
        <view class="form-style-title">
          <view class="left-info-tag" style="margin-top:14rpx"></view>
          <view class="fs-title">物品相关信息</view>
        </view>
        <view v-if="goodsList.length == 0">
          <u-input placeholder="当输入案件编号和移送函编码后可关联物品" :disabled="true" height="66" />
        </view>
        <view v-for="(item,index) in goodsList" :key="index" style="border-bottom:1px solid #DADADD;font-size:26rpx">
          <u-swipe-action
            :show="item.show"
            :index="item.goodsUuid"
            :disabled="item.swiperDisabled"
            @click="swiperClick(item.goodsUuid,index)"
            @open="swiperOpen(item)"
            :options="item.swiperOptions"
          >
            <view class="list-name">
              <view class="list-name_index">
                {{ index + 1 }}
              </view>
              <view style="font-size:30rpx">
                {{ item.goodsName }}
              </view>
            </view>
            <view>
              <text>
                当事人：
              </text>
              <text>
                {{ item.party }}
              </text>
            </view>
            <view>
              <text>
                物品大类：
              </text>
              <text>
                {{ item.propTypeName }}
              </text>
            </view>
            <view>
              <text>
                物品小类：
              </text>
              <text>
                {{ item.propSubtypeName }}
              </text>
            </view>
            <u-row gutter="16">
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    入库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.qty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    可出库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.baseQty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    出库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.outQty || 0 }}
                  </view>
                </view>
              </u-col>
            </u-row>
          </u-swipe-action>
        </view>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">附件列表</view>
        </view>
        <m-upload
          :uploadParam="fileUploadParam"
          upApiUrl="uploadBase64ForApp"
          :fileList="fileList"
          @on-list-change="changeUpload"
        ></m-upload>
      </view>
    </view>
    <view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
      <u-button class="u-btn" type="primary" @click="submit">
        提交
      </u-button>
    </view>
  </view>
</template>

<script>
import MUpload from "@/components/m-upload.vue";
import { uuid, } from '@/common/util.js';
import storeService from '@/service/store/store.service.js';
import {ESCROW_TYPE,} from "@/service/store/mapping/enum.js"
export default {
  components: {
    MUpload,
  },
  data() {
    return {
      customStyle:{
        padding:"20rpx 32rpx",
      },
      labelStyle:{
        'color':"#666666",
        'font-size':'13px',
      },
      fileUploadParam:{
        fiGroupCode:this.$FILE_GROUP_TYPE.c_custody_apply,
        // bizId:"",
      },
      detailItem: {},
      goodsList: [],
      baseInfo: {
        caseType: "trans_case",
        custodyType: ESCROW_TYPE.TRANSFER,
        docId: uuid(),
        photo: '',
        storeId:'',
      },
      fileList: [],
      rules: {
        docNo: [{
          required: true,
          message: '请输入',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        caseCode: [{
          required: true,
          message: '请输入',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        storeName: [{
          required: true,
          message: '请选择',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        remake: [{
          required: true,
          message: '请输入',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
      },
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx end
    }
  },
  onLoad() {
    // this.fileUploadParam.bizId = uuid();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getItemCanEdit (item) {
      let swiperOptions = [];
      swiperOptions.push({
        text: '删除',
        action:"delete",
        style: {
          backgroundColor: this.$theme.u_type_error,
        },
      });
      item.swiperOptions = swiperOptions;
      item.swiperDisabled = false;
    },
    swiperClick(index1, index) {
      this.goodsList.splice(index, 1);
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = false;
      });
      this.$forceUpdate()
    },
    swiperOpen(item) {
      let id = item.goodsUuid + item.propSubType + item.propType + item.party;
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = id == (val.goodsUuid + val.propSubType + val.propType + val.party);
      });
      this.$forceUpdate()
    },
    // 上传/删除图片事件
    changeUpload(list, key){
      if(list.length > 0){
        this.fileList = [...list,];
      }else{
        this.fileList = [];
      }
    },
    searchGoods () { // 模糊查物品
      let param = {
        caseCode: this.baseInfo.caseCode,
        docNo:this.baseInfo.docNo,
      }
      this.$modal.showLoading('加载中...');
      storeService.queryDocTransGoodsList(param).then(res => {
        if (res.success) {
          this.$modal.hideLoading();
          this.goodsList = res.data.filter(item => {
            this.getItemCanEdit(item);
            item.show = false;
            item.swiperDisabled = false;
            return item;
          })
        } else {
          this.$modal.hideLoading();
          this.$u.toast(res.msg);
        }
      }).catch(err => {
        this.$modal.hideLoading();
        console.log(err)
      });
    },
    handlerSelect () {  // 选择仓库
      console.log(this.baseInfo.caseCode);
      this.$u.route("pages/store/components/selectWarehouseList?caseCode=" + this.baseInfo.caseCode)
    },
    updateBackState(param){
      if (param.select) {
        this.baseInfo.storeName = param.select[0].storeName
        this.baseInfo.storeId = param.select[0].storeId
      }
      this.$forceUpdate()
    },
    submit () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (this.goodsList.length == 0) return this.$u.toast('物品信息为空！')
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.$u.test.isEmpty(this.goodsList[i].qty)) {
              return this.$u.toast(`第【${i + 1}】条数量不允许为空或者0！`)
            }
          }
          if (this.fileList.length > 0) {
            let photoId = []
            this.fileList.forEach(item => {
              photoId.push(item.gfiId)
            })
            this.baseInfo.photo = photoId.join()
          }
          let param = {...this.baseInfo,custodyDtlList:this.goodsList,}
          this.$modal.showLoading('正在提交中...');
          storeService.saveCustodyInfo(param).then(res => {
            if (res.success) {
              this.$modal.hideLoading();
              this.backPrev({
                paramKey:'refresh',
                param:true,
              })
            } else {
              this.$modal.hideLoading();
              this.$u.toast(res.msg);
            }
          }).catch(err => {
            this.$modal.hideLoading();
            console.log(err)
          });
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page{
  padding: 28rpx 30rpx;
}
.upload-sty{
  margin-left: -12rpx;
}
.pd-lf{
  padding-left: 0;
}
.pd-tp{
  padding-top: 13px;
}
.content{
  // padding: 24rpx 36rpx 180rpx 36rpx;
  padding-bottom: 180rpx;
}
.content-btn{
  padding: 24rpx 36rpx 20rpx 36rpx;
}
.fs-30{
  font-size:30rpx
}
.It-title{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #DADADD;
  padding-bottom: 11px;
  align-items: center;
}
.CT-title{
  font-size: 18px;
  font-weight: bold;
}
.CT-label{
  font-size: 13px;
  color: #989EA1;
  padding-bottom: 6px;
}
.CT-value{
  font-size: 14px;
  color: #393B3D;
}
.form-style-title{
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
}
.form-style{
  padding: 0rpx 8rpx
}
.left-info-tag{
  padding: 8px 2px;
  background-color: #ee8c4f ;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.left-info-check-tag{
  padding: 8px 2px;
  background-color: #ee8c4f;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.fs-title{
  font-weight: bold;
  font-size: 32rpx;
}
.loc-box {
  line-height: 38px;
  padding: 11px 0;
  font-size: 13px;
  color: #303133;
}
.inline-box {
  display: flex;
  align-items: center;
}
.loc-inline{
  font-size: 13px;
  color: #666666;
}
.part-item-info {
  text-align: left;
  .sub-title {
    color: $u-tips-color;
    padding-bottom: 10rpx;
    font-size: 26rpx;
  }
  .main-info {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .main-info-color {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
    color: red;
  }
}
.list-name{
  display: flex;
  &_index{
    background-color: #e0e0e0;
    width: 21px;
    height: 21px;
    margin: 7px 9px 0 0;
    border-radius: 50%;
    text-align: center;
    line-height: 21px;
  }
}
.total-sty{
  padding-top: 20rpx;
}
.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			uni-button {
				flex: 0.28;
			}
		}
	}
</style>
